<template>
  <div>
    <div class="h_header flexrowbetween">
      <span>数据看版</span>
      <SelectTime @changeTime='changeTime' />
    </div>
    <el-row :gutter="25" class="h_content" v-loading='loading'>
      <el-col :span="25">
        <div class="bg_box">
          <div class="f-14 c_fff pb_10 box_h">{{dayname}}总广告计划</div>
          <div class="flexrowbetween alignend">
            <div class="box_l">
              <div class="f-30 c_fff h_num">{{dataInfo.plan.now}}</div>
              <div class="f-14 c_fff mb_5">月环比 
                <i v-if="rate1>=0" class="el-icon-top c_34FF5B"></i>
                <i v-else class="el-icon-bottom c_E50000"></i>
                {{rate1}}%
              </div>
              <div class="f-14 c_fff mb_5">日均花费 ￥233</div>
            </div>
            <div>
              <img src="@/assets/images/r1.png" alt="" class="box_rimg">
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="25">
        <div class="bg_box bg1">
          <div class="f-14 c_fff pb_10 box_h">{{dayname}}流量数据点击量</div>
          <div class="flexrowbetween alignend">
            <div class="box_l">
              <div class="f-30 c_fff h_num">{{dataInfo.click.now}}</div>
              <div class="f-14 c_fff mb_5 mt_30">月环比 
                <i v-if="rate2>=0" class="el-icon-top c_34FF5B"></i>
                <i v-else class="el-icon-bottom c_E50000"></i>
                {{rate2}}%</div>
            </div>
            <div>
              <img src="@/assets/images/r2.png" alt="" class="box_rimg">
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="25">
        <div class="bg_box bg2">
          <div class="f-14 c_fff pb_10 box_h">{{dayname}}流量数据展示量</div>
          <div class="flexrowbetween alignend">
            <div class="box_l">
              <div class="f-30 c_fff h_num">{{dataInfo.get.now}}</div>
              <div class="f-14 c_fff mb_5 mt_30">
                月环比 
                <i v-if="rate3>=0" class="el-icon-top c_34FF5B"></i>
                <i v-else class="el-icon-bottom c_E50000"></i>
                {{rate3}}%
              </div>
            </div>
            <div>
              <img src="@/assets/images/r3.png" alt="" class="box_rimg">
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="25">
        <div class="bg_box bg3">
          <div class="f-14 c_fff pb_10 box_h">{{dayname}}充值收益</div>
          <div class="flexrowbetween alignend">
            <div class="box_l">
              <div class="f-30 c_fff h_num">{{dataInfo.pay.now}}</div>
              <div class="f-14 c_fff mb_5 mt_30">月环比
                <i v-if="rate4>=0" class="el-icon-top c_34FF5B"></i>
                <i v-else class="el-icon-bottom c_E50000"></i>
                <!-- <i class="el-icon-top c_34FF5B"></i> -->
                {{rate4}}%
              </div>
            </div>
            <div>
              <img src="@/assets/images/r4.png" alt="" class="box_rimg">
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="25">
        <div class="bg_box bg3">
          <div class="f-14 c_fff pb_10 box_h">{{dayname}}消耗收益</div>
          <div class="flexrowbetween alignend">
            <div class="box_l">
              <div class="f-30 c_fff h_num">{{dataInfo.use.now}}</div>
              <div class="f-14 c_fff mb_5 mt_30">月环比 
                <i v-if="rate5>=0" class="el-icon-top c_34FF5B"></i>
                <i v-else class="el-icon-bottom c_E50000"></i>
                {{rate5}}%
              </div>
            </div>
            <div>
              <img src="@/assets/images/r5.png" alt="" class="box_rimg">
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { dataDayList } from '@/api/home'
import SelectTime from './SelectTime.vue'
import { time_date } from '@/utils/validate'
export default {
  data() {
    return {
      loading:false,
      dayname:'今日',
      queryParams:{
        now_start:'',
        now_end:'',
        old_start:'',
        old_end:'',
      },
      dataInfo:{
        click:{now:'',old:''},
        get:{now:'',old:''},
        pay:{now:'',old:''},
        plan:{now:'',old:''},
        use:{now:'',old:''},
      },
      rate1:'',
      rate2:'',
      rate3:'',
      rate4:'',
      rate5:'',
    };
  },
  props: {
    title: {
      default: "",
    },
  },
  components:{
    SelectTime
  },
  created(){
    this.queryParams.now_start = this.parseTime(time_date(1).start)
    this.queryParams.now_end = this.parseTime(time_date(1).end)
    this.queryParams.old_start = this.parseTime(time_date(-1).start)
    this.queryParams.old_end = this.parseTime(time_date(-1).end)
    this.getInfo()
  },
  methods: {
    changeTime(params){
      this.queryParams = params.params
      this.dayname = params.item.name
      this.getInfo()
    },


    getInfo(){
      this.loading = true
      dataDayList(this.queryParams).then(res=>{
        this.loading = false
        this.dataInfo = res.data
        // 广告率
        let plan = this.dataInfo.plan
        if(plan.old == 0){
          this.rate1 = 0
        }else{
          this.rate1 = (((plan.now - plan.old)/plan.old).toFixed(4)*100).toFixed(2)
        }
        // 点击率
        let click = this.dataInfo.click
        if(click.old == 0){
          this.rate2 = 0
        }else{
          this.rate2 = (((click.now - click.old)/click.old).toFixed(4)*100).toFixed(2)
        }
        // 展示率
        let get = this.dataInfo.get
        if(get.old == 0){
          this.rate3 = 0
        }else{
          this.rate3 = (((get.now - get.old)/get.old).toFixed(4)*100).toFixed(2)
        }
        // 充值收益
        let pay = this.dataInfo.pay
        if(pay.old == 0){
          this.rate4 = 0
        }else{
          this.rate4 = ((pay.now - pay.old)/pay.old).toFixed(4)*100
        }
        // 消耗收益
        let user = this.dataInfo.use
        if(user.old == 0){
          this.rate5 = 0
        }else{
          this.rate5 = ((user.now - user.old)/user.old).toFixed(4)*100
        }
      }).catch(()=>{
        this.loading = false
      })
      this.loading = false
    },
  },
};
</script>
<style lang="scss" scoped>
.h_header {
  border-bottom: 1px solid #d5d5d5;
  height: 55px;
  padding: 0 15px;
}
.h_content{
  padding: 25px;
}
.el-col-25{
  width: 20%;
}
.bg_box{
  width: 100%;
  height: 160px;
  background: url('~@/assets/images/resf1.png') no-repeat;
  background-size: 100% 100%;
  padding: 15px 18px;
}
.box_h{
  border-bottom: 1px solid #fff;
}
.box_l{
  width: calc(100% - 60px);
}
.box_rimg{
  width: 60px;
  height: 60px;
}
.h_num{
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>